<template>
  <div class="write-container">
    <div class="title-wrapper flex align-center justify-between">
      <el-form v-model="docForm" :inline="true" class="left-form flex-1">
        <el-form-item>
          <el-input v-model="docForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="docForm.doc_id" placeholder="请选择目录(可选)">
            <el-option v-for="item in 5" :key="item" :value="item">目录{{ item }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input-number placeholder="排序(可选)" />
        </el-form-item>
      </el-form>

      <div class="right-btns">
        <el-button type="warning">在线工具</el-button>
        <el-button type="success">保存</el-button>
        <el-button type="primary">保存为模板</el-button>
        <el-button type="info">返回</el-button>
      </div>
    </div>

    <!-- 底下编辑器 -->
    <div class="editor-wrapper">
      <!--
        TODO: 如果渲染 markdown 则没有什么问题(参考), 如果直接渲染html需要自己写样式
        参考这个项目:https://gitee.com/liaohui5/vue-mavon-editor-render-demo
      -->
      <mavon-editor class="editor" :value="markdown" :navigation="true" codeStyle="monokai" />
    </div>
  </div>
</template>

<script>
export default {
  name: "CreateDocs",
  data: () => ({
    docForm: {
      title: "",
      doc_id: "",
      order: "",
    },
    markdown: "",
  }),
};
</script>

<style lang="scss" scoped>
.write-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  // 顶部表单/按钮
  .title-wrapper {
    height: 60px;
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    .left-form {
      .el-form-item {
        margin-bottom: 0;
        margin-right: 20px;
      }
    }
  }

  // 底部编辑器
  .editor-wrapper {
    height: calc(100% - 60px);
    width: 100%;
    .editor {
      height: 100%;
    }
  }
}
</style>
